// out: false,main:../dark_default.less
@login-img-url: '/pr/pc/images/login';
@login-bg: 'bg1.jpg';

//定义
.login-loop(@n, @i: 1) when (@i <=@n) {
    .login@{i} {
        background-image: url("@{login-img-url}/login@{i}.png");
    }

    .login-loop(@n,
        (@i + 1));
}

.login-bg {
    background: url("@{login-img-url}/@{login-bg}") no-repeat;
    background-position: center center;
    background-size: 100% 100%;
    height: 100%;
    overflow: hidden;

    .login-header {
        text-align: center;
        margin: 100px 0 100px 0;

        .login-title {
            background-position: center top;
            height: @header-height;
            display: inline-block;

            .logo-img {
                float: left;

                img {
                    height: 70px;
                    width: 70px;
                    margin: 3px 0 0 0;
                }
            }

            .title-label {
                font-size: 40px;
                font-family: Verdana, Geneva, Tahoma, sans-serif;
                white-space: nowrap;
                font-weight: bold;
                display: inline-block;
                float: left;
                padding: 8px 0 0 0;
                -webkit-line-clamp: 2;
                background-image: -webkit-linear-gradient(bottom, @logo-font-color, spin(@logo-font-color, 330));
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
            }
        }
    }

    .login-box {
        width: 800px;
        height: 350px;
        margin: 0 auto;

        .login-img {
            float: left;
            width: 50%;
            position: relative;
            background: #f3f8ff;
            height: 100%;
            border-radius: 20px 0px 0px 20px;

            .loginTp {
                position: absolute;
                background-repeat: no-repeat;
                background-position: right bottom;
                width: 460px;
                height: 460px;
                background-size: contain;
                right: 0;
                bottom: -30px;
            }

            .login-loop(6);
        }

        .login-boxsub {
            float: right;
            width: 50%;
            border-radius: 0px 20px 20px 0;
            background: #fff;
            height: 100%;

            .login-bk {
                width: 90%;
                margin: 0 auto;

                .login-hd {
                    font-size: 22px;
                    font-weight: bold;
                    color: #1E9FFF;
                    padding: 25px 0 15px 0;
                }

                .layui-form {
                    .layui-form-item {
                        margin: 0 0 20px 0;

                        .layui-input {
                            background-color: #fff !important;
                            border: 1px solid #e6e6e6 !important;
                            color: #333;
                        }
                    }
                }

                .layadmin-user-login-codeimg {
                    width: 130px;
                }
            }
        }
    }

    .login-bottom {
        position: fixed;
        width: 100%;
        bottom: 0;
        margin: 20px auto;
        text-align: center;
        color: #fff;
    }
}



@media screen and (max-width: 992px) {
    .login-bg {
        box-sizing: border-box;
        padding: 10px;

        .login-header {
            margin: 0 0 10px 0;
            display: block;
            overflow: hidden;
            z-index: 999;

            .login-title {
                text-align: center;
                height: auto;
                display: block;
                overflow: hidden;

                .logo-img {
                    float: none;
                    clear: both;
                    display: block;

                    img {
                        width: 50px;
                        height: 50px;
                    }
                }

                .title-label {
                    font-size: 22px;
                    display: block;
                    overflow: hidden;
                    float: none;
                }
            }
        }

        .login-box {
            width: 100% !important;

            .login-img {
                display: block;
                width: 100% !important;
                border-radius: 0;
                height: 200px;

                .loginTp {
                    width: 100%;
                    height: 110%;
                    bottom: -10px;
                    background-position: center bottom;
                }
            }

            .login-boxsub {
                width: 100% !important;
                border-radius: 0;
                overflow: hidden;
                height: auto;
            }
        }

        .layui-form-item {
            margin: 0 0 10px 0 !important;

            .layui-inline {
                display: inline-block;
            }
        }
    }
}